<template>
  <div class="tagOuter">
    <!-- 面包屑导航 -->
    <div class="tagTop">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/layout/portal' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 标题 -->
    <h3 class="title">标签管理</h3>

    <!-- 内容区 -->
    <div class="tag">
      <div class="tag_top">
        <!-- 搜索标签 -->
        <div class="tag_search">
          <el-input v-model="keyWord" placeholder="请输入标签关键字" clearable />
          <el-button type="primary" plain @click="tagFind">搜索</el-button>
        </div>

        <!-- 添加标签 -->
        <div class="tag_addBtn">
          <el-button type="primary" round @click="tagAdd"> 添加标签 </el-button>
        </div>
      </div>
      <!-- 标签列表 -->
      <div class="tag_list">
        <el-table height="460" :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" type="index" index="index" width="80" />
          <el-table-column align="center" prop="tagName" label="标签名称" width="200" />
          <el-table-column align="center" label="状态" width="160">
            <template #default="scope">
              <el-switch v-model="scope.row.tagStatus" @change="switchChange(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="tagCreateTime" label="创建时间" width="200" />
          <el-table-column align="center" prop="updateTime" label="修改时间" width="200" />
          <el-table-column align="center" label="操作" width="200">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" circle @click="tagUpdate(scope.row)" />
              <el-button type="danger" :icon="Delete" circle @click="tagDel(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <!-- 弹出框 -->
  <el-dialog v-model="dialogFormVisible" :title="popTitle">
    <el-form :model="form">
      <el-form-item label="标签名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="popConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ArrowRight, Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { timeChange } from '../../hooks/index'
import {
  getTagApi,
  setTagStatusApi,
  addTagApi,
  delTagApi,
  setTagApi,
} from "../../service/apiModule/tagApi";

onMounted(() => {
  getTag();
});

// 弹框标题
const popTitle = ref("");

// 弹框状态 - 默认添加
const popStatus = ref(false);

// 标签搜索关键字
const keyWord = ref("");

// 标签列表序号
const indexMethod = (index: number) => {
  return index;
};

// 标签列表数据
const tableData = ref([
  {
    tagName: "",
    articleNum: 0,
    tagCreateTime: 0,
    tagStatus: false,
    updateTime: 0,
    _id: "",
  },
]);

// 获取标签数据
const getTag = async () => {
  const { data: res } = await getTagApi({ name: "" });
  if (res.status.code !== 200) {
    ElMessage.error("标签获取失败!");
  } else {
    res.data.list.forEach((item: any) => {
      item.tagCreateTime = timeChange(item.tagCreateTime)
      item.updateTime = timeChange(item.updateTime)
    })
    tableData.value = res.data.list;
    ElMessage.success("标签获取成功!");
  }
};

// 弹框的显示与隐藏
let dialogFormVisible = ref(false);

// 添加标签
const tagAdd = () => {
  popTitle.value = "添加标签";
  dialogFormVisible.value = true;
  popStatus.value = false;
};

const updataTagId = ref("");
// 修改标签
const tagUpdate = (data: any) => {
  dialogFormVisible.value = true;
  popTitle.value = "修改标签";
  popStatus.value = true;
  form.name = data.tagName;
  updataTagId.value = data._id;
};

// 状态开关
const switchChange = async (data: any) => {
  const { data: res } = await setTagStatusApi({
    id: data._id,
    tagStatus: data.tagStatus,
  });
  if (res.status.code !== 200) {
    ElMessage.error("标签状态修改失败!");
  } else {
    ElMessage.success("标签状态修改成功!");
    getTag()
  }
};

// 删除标签
const tagDel = async (data: any) => {
  const { data: res } = await delTagApi({ id: data._id });
  if (res.status.code !== 200) {
    ElMessage.error("删除失败!");
  } else {
    ElMessage.success("删除成功!");
    getTag();
  }
};

// 搜索标签
const tagFind = async () => {
  const { data: res } = await getTagApi({ name: keyWord.value });
  if (res.status.code !== 200) {
    ElMessage.error("标签查询失败!");
  } else {
    res.data.list.forEach((item: any) => {
      item.tagCreateTime = timeChange(item.tagCreateTime)
      item.updateTime = timeChange(item.updateTime)
    })
    tableData.value = res.data.list;
    ElMessage.success("标签查询成功!");
  }
};

// 弹框
const formLabelWidth = "140px";

// 弹框绑定数据
const form = reactive({
  name: "",
  type: [],
});

// 新增弹框确定按钮
const popConfirm = async () => {
  // 添加
  if (popStatus.value === false) {
    if (form.name) {
      const { data: res } = await addTagApi({ tagName: form.name });
      if (res.status.code !== 200) {
        ElMessage.error("标签添加失败!");
      } else {
        ElMessage.success("标签添加成功!");
        form.name = "";
        dialogFormVisible.value = false;
        getTag();
      }
    } else {
      ElMessage.info("请输入标签名!");
    }
  } else {
    // 修改
    const { data: res } = await setTagApi({
      id: updataTagId.value,
      tagName: form.name,
    });
    if (res.status.code !== 200) {
      ElMessage.error("标签修改失败!");
    } else {
      form.name = "";
      dialogFormVisible.value = false;
      ElMessage.success("标签修改成功!");
      getTag();
    }
  }
};
</script>

<style lang="scss" scoped>
$H: 91vh;

.tagOuter {
  width: 100%;
  height: $H;
  background-color: rgb(243, 243, 243);
  padding: 20px;

  .tagTop {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 10px;
    border-radius: 10px;
  }

  .title {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .tag {
    background-color: #fff;
    padding: 10px 0 0 10px;
    border-radius: 10px;
    min-height: 60%;
    max-height: 86%;

    .tag_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 30px 10px 10px;

      .tag_search {
        width: 26%;
        display: flex;
        align-items: center;

        &>.el-input {
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
